
<!-- 框架布局页面，组件主界面 -->
<template>
    <a-config-provider :locale="data.locale">
        <div class="index" style="background-color: #FFF;">
            <!-- 顶部栏 -->
            <page-header @changeScale="changeScale" @changePageType="changePageType" @resetEditPanel="resetEditPanel"
                @handleTestShowData="handleTestShowData" @viewJsonData="viewJsonData" @viewHistory="viewHistory"
                @clearActiveItem="clearActiveItem" @handleResetSelectItem="handleResetSelectItem"
                @previewPage="previewPage">
                <template v-if="$slots['header-left']" #header-left>
                    <slot name="header-left"></slot>
                </template>
                <template v-if="$slots['header-right']" #header-right>
                    <slot name="header-right"></slot>
                </template>
            </page-header>

            <div class="index-content">
                <div class="left">
                    <left-panel @handleSetSelectItem="handleSetSelectItem" :selectItem="storage.selectItem"
                        @handleResetSelectItem="handleResetSelectItem"></left-panel>
                </div>
                <div class="center gray-bg">
                    <designer-panel :scaleValue="data.scaleValue" :selectItem="storage.selectItem"
                        @getGenerateData="getGenerateData" @clearOtherActive="clearOtherActive"
                        @resetEditPanel="resetEditPanel" @clearActiveItem="clearActiveItem"
                        @handleSetSelectItem="handleSetSelectItem" @handleResetSelectItem="handleResetSelectItem"
                        :pageTemplate="generateData.data"></designer-panel>
                </div>
                <div class="right">
                    <right-panel :selectItem="storage.selectItem"></right-panel>
                </div>
            </div>
            <json-view-modal ref="jsonView" />
            <page-view-modal ref="pageView" />
            <history-modal ref="history" />
        </div>
    </a-config-provider>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import pageHeader from './top/pageHeader.vue';
import leftPanel from './tool/leftPanel.vue';
import rightPanel from './property/rightPanel.vue';
import designerPanel from './center/designerPanel.vue';
import jsonViewModal from './modal/jsonViewModal.vue'
import pageViewModal from './modal/pageViewModal.vue';
import historyModal from './modal/historyModal.vue'
import { componentList } from '../componentManager.js'
import { initDesigner, generateData, pageData, storage, resetPagePanel, setPageTypeSelect } from '../pageManager.js'
import { manager } from '../manager.js'

defineOptions({ name: 'dcPageDesigner' })

dayjs.locale("zh-cn");

// 查看JSON数据弹窗
const jsonView = ref(null)
// 页面预览弹窗
const pageView = ref(null)
// 历史操作记录
const history = ref(null)

const emit = defineEmits(['ready'])

const data = reactive({
    scaleValue: 1,
    locale: zhCN
})

const props = defineProps({
    options: {
        type: Object,
    },
})

// 页面渲染后触发
onMounted(() => {
    emit("ready", manager.designer);
})

// 页面创建后触发
const created = () => {
    initDesigner(props.options);
    // console.log("页面设计器创建成功：DcPageDesigner created")
}

created();

/**
 * @method
 * @desc 查看数据
 */
const viewJsonData = () => {
    jsonView.value.show(generateData.data);
}

/**
 * @method
 * @desc 查看历史操作记录
 */
const viewHistory = () => {
    history.value.show();
}

/**
 * @method
 * @desc 预览页面
 */
const previewPage = () => {
    // pageView
    pageView.value.open();
}


/**
 * @method
 * @desc 查看当前数据的函数，用于测试使用
 */
const handleTestShowData = () => {
    // console.log("===================================================================");
    // console.log("页面生成数据generateData:", generateData);
    // console.log("组件列表数据componentList:", componentList);
    // console.log("页面数据源pageData:", pageData);
    // console.log("===================================================================");
}

/**
 * @method
 * @param {Object} item 当前组件的对象数据
 * @desc 选中当前组件
 */
const handleSetSelectItem = (item) => {
    // alert("顶层handleSetSelectItem")
    // console.log('handleSetSelectItem:', item);
    storage.selectItem = item
    item.active = true;
    // 清除其它组件的点击状态
    clearOtherActive(item.id);
}

/**
 * @method
 * @desc 清除选中的组件
 */
const handleResetSelectItem = () => {
    let datas = generateData.data.children;
    for (let i = 0; i < datas.length; i++) {
        let el = datas[i];
        el.active = false;
    }
    storage.selectItem = undefined;
}

/**
 * @method
 * @desc 清除中间所有组件的点击状态
 */
const clearActiveItem = () => {
    const traverse = array => {
        for (let i = 0; i < array.length; i++) {
            let el = array[i];
            if (el.children) {
                el.active = false;
                traverse(el.children);
            } else {
                el.active = false;
            }
        }
    };
    traverse(generateData.data.children)
}

/**
 * @method
 * @param {String} id 当前组件的唯一标识符id
 * @desc 清除其它中间组件的点击状态
 */
const clearOtherActive = (id) => {
    const traverse = array => {
        for (let i = 0; i < array.length; i++) {
            let el = array[i];
            if (el.id === id) {
                el.active = true;
            } else {
                el.active = false;
            }
            if (el.children && el.children.length > 0) {
                traverse(el.children);
            }
        }
    };
    traverse(generateData.data.children)
}


/**
 * @method
 * @param {String} value 缩放的值
 * @desc 画布缩放
 */
const changeScale = (value) => {
    data.scaleValue = value;
}

/**
 * @method
 * @param {String} type 页面类型
 * @desc 更改页面类型
 */
const changePageType = (type) => {
    setPageTypeSelect(type);
}

/**
 * @method
 * @desc 获取页面数据
 */
const getGenerateData = () => {
    // console.log("getGenerateData::", generateData);
    return generateData;
}

/**
 * @method
 * @desc 重置画布
 */
const resetEditPanel = () => {
    resetPagePanel();
}

</script>

<style lang="less" scoped>
.index {
    height: 100%;
    border: 1px solid var(--borderColor);

    .index-content {
        height: calc(100% - 50px);
        width: 100%;
        display: flex;

        .left {
            width: auto;
        }

        .center {
            overflow: hidden;
            flex: 1;
            background-size: 15px 15px;
            box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.1);
            &.gray-bg {
                background-color: #EDEFEF;
                // background-image: url("@/package/common/style/gray-bg.jpg");
                // background-repeat: repeat;
                // background-size: 300px 400px;
            }

            // &.brick-bg {
            //     background-image: url("@/package/common/style/brick-bg.png");
            //     background-repeat: repeat;
            //     background-size: 300px 400px;
            // }

            &.dot-bg {
                background-image: linear-gradient(#f8f8f8 14px, transparent 0),
                    linear-gradient(90deg, transparent 14px, #373739 0);
            }
        }

        .right {
            width: 270px;
        }
    }
}
</style>